<template>
  <div>
    <div class="top" v-show="topshow">
      <form action="/">
        <van-search v-model="value" show-action :placeholder="placeholderVal" @search="onSearch" @cancel="onCancel" />
      </form>
      <delre :searchHistoryData="searchHistoryData" :searchHotData="searchHotData" @heerweiyi="gosearch"></delre>
    </div>
    <div v-show="!topshow">
      <!-- 搜索框 -->
      <form action="/">
        <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"
          @input="xxxx" />
      </form>
      <!-- 下拉框 -->
      <div v-show="xxx">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" disabled :options="option1" />
          <van-dropdown-item v-model="value2" title="价格" :options="option2" @change="jiagebiandong(value2)" />
          <van-dropdown-item v-model="value3" title="分类" :options="three" @change="fenleibiandong(value3)" />
        </van-dropdown-menu>
        <!-- 下方的渲染的数据 -->
        <ul>
          <li v-for="item in sdata" :key="item.id">
            <img :src="item.list_pic_url" alt="">
            <span>{{ item.name }}</span>
            <p>{{ item.retail_price }}</p>
          </li>
        </ul>
      </div>
      <div v-show="!xxx">
        <p v-for="item in searchHotData" @click="dianji(item.keyword)">{{ item.keyword }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Toast } from 'vant';
import { sskdata } from '@/api/sskdata';
import delre from '@/components/delre.vue'
import { goodslist } from '@/api/goodslist';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);

Vue.use(Search)
export default {
  name: '',
  data() {
    return {
      topshow: true,
      xxx: true,
      value: '', //搜索框里面输入的值
      searchHistoryData: [], // 历史记录列表
      searchHotData: [], // 热门搜索列表
      placeholderVal: '',
      sdata: [],

      order: "desc", // desc 价格由高到底，asc 价格由低到底高
      categoryId: '', // 类别id，代表下拉菜单中的全部、居家等选项
      sort: "id", // 可以是id或price 
      value1: 0,
      value2: '',
      value3: '',
      three: [],
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
      ],

    };
  },
  created() {
    // 搜索框数据
    sskdata().then(res => {
      console.log('搜索框数据', res);
      this.placeholderVal = res.data.defaultKeyword.keyword; // 搜索框 placeholder 提示词
      this.searchHistoryData = res.data.historyKeywordList; // 历史记录列表
      this.searchHotData = res.data.hotKeywordList; // 热门搜索列表
    })
  },
  components: {
    delre
  },

  methods: {
    onSearch(val) {
      this.topshow = false
      goodslist({
        keyword: this.value,
        page: 1,
        size: 20,
        order: this.order, //价格排序
        categoryId: this.categoryId, //分类排序id
        sort: this.sort, //分类拍戏
      }).then(res => {
        console.log('这个是搜索对应词汇出来对应的商品', res);
        let cate = res.data.filterCategory
        this.three = JSON.parse(
          JSON.stringify(cate).replace(/id/g, "value").replace(/name/g, "text")
        )
        console.log('转化为对象的', this.three);
        this.sdata = res.data.data
      })

    },
    xxxx() {
      if (this.value == '') {
        this.xxx = false
      }
    },
    dianji(i) {
      this.value = i
      this.onSearch()
      this.xxx = true
    },
    onCancel() {
      // 返回上一页
      this.$router.push("/home");
    },
    gosearch(m) {
      this.value = m
      this.onSearch()
    },
    jiagebiandong(v2) {
      this.order = v2
      this.sort = 'price'
      this.onSearch()

    },
    fenleibiandong(v3) {
      this.categoryId = v3
      console.log(v3);
      this.sort = 'id'
      this.onSearch()
    }
  },
  computed: {
    // value3: {
    // get() {
    //   let val = "";
    //   this.three.map((item) => {
    //     console.log(item.checked);
    //     if (item.checked) {
    //       val = item.value;
    //     }
    //   });
    //   return val;
    // },
    // set(val) {
    //   console.log(val);

    // },
    // },
  },


}

</script>
<style lang="less" scoped>
ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;


    span {
      font-size: 10px;
      margin-bottom: 10px;
    }

    p {
      font-size: 10px;

    }

    img {
      width: 100%;
    }
  }
}
</style>